---
name: useMeasure
rank: 46
tagline: Effortlessly measure and track your component’s dimensions with useMeasure.
sandboxId: usemeasure-3kyegb
previewHeight: 300px
relatedHooks:
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMeasure hook provides a convenient and efficient way to monitor and
  respond to changes in the size of a React component. This custom hook uses the
  ResizeObserver API to actively track changes in the component’s dimensions,
  such as width and height, and keeps them available as state. The returned ref
  is used on the element whose dimensions you want to measure, making it a
  valuable tool for responsive design and dynamic layout adjustments.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name | Type | Description |
  | --- | --- | --- |
  | ref | React ref object | A React reference that can be attached to a DOM element to observe. |
  | rect | object | An object containing the width and height of the observed element. |
  </div>

  ### rect Object Properties

  <div class="table-container">
  | Property | Type | Description |
  | --- | --- | --- |
  | width | number | Width of the observed element. |
  | height | number | Height of the observed element. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMeasure } from "@uidotdev/usehooks";

function Measure({ type = "horizontal" }) {
  const [ref, { width, height }] = useMeasure();

  return (
    <figure>
      <figcaption>
        <span>{type}</span>
      </figcaption>
      <article
        ref={ref}
        className={type}
        style={{
          resize: type
        }}
      >
        {type === "horizontal" ? (
          <label>width: {Math.floor(width)}</label>
        ) : (
          <label>height: {Math.floor(height)}</label>
        )}
      </article>
    </figure>
  );
}

export default function App() {
  return (
    <section>
      <h1>useMeasure</h1>
      <p>(Resize the rulers)</p>
      <Measure />
    </section>
  );
}

```

</StaticCodeContainer>
